<template> 
  <h1>个人信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>性别：{{sex}}</h2>
  <button @click="sayHello">点我展示Vue3中setup中展示个人信息的方法</button> <br><br>
  <button @click="sayWelcome">点我展示Vue2中的配置的欢迎方法</button><br><br>
  <button @click="test1">在Vue2配置的方法中调用Vue3中的配置的数据、方法</button> <br><br>
  <button @click="test2">在Vue3配置的setup配置中调用Vue2中的配置的数据、方法</button>
</template>

<script>  
// import {h} from 'vue'
export default {
  name: 'App', 
  data(){
    return {
      sex: '男'
    }
  },
  methods: {
    sayWelcome(){
      alert('欢迎来到南昌大学学习')
    },
    test1(){
      console.log(this.sex)
      console.log(this.name)
      console.log(this.age)
      this.sayHello()
    }
  },
  setup() {
    let name = '张三'
    let age = 18

    function sayHello(){
      alert(`我是${name}, 我${age}岁了！`)
    }
    
    function test2(){
      console.log(name)
      console.log(age)
      console.log(this.sex)
      this.sayWelcome() 
    }

    // 返回一个对象 (常用)
    return {
      name,
      age,
      sayHello,
      test2
    }

    // 返回一个函数 (渲染函数) (不常用)
    // return () => h('h1', '南昌大学')
  }
}
</script>

